<template>
  <!-- 确认尾款 -->
  <el-dialog 
    id='dialogBox'
    title="确认尾款" 
    :close-on-click-modal='false'
    :before-close="handleClose"
    :visible.sync="paymentDialogVisible" 
    z-index='1499'
    width="30%">
    <el-form ref="form" label-width="100px">
      <el-form-item label="收款人：">
        <el-input v-model="orderTailConfirmParams.name" placeholder="请输入收款人姓名"></el-input>
      </el-form-item>
      <el-form-item label="收款凭证：">
        <el-upload
          class="upload-demo"
          :action="uploadAction"
          name="userfile"
          :show-file-list="false"
          :on-success="handleRotationSuccess"
        >
          <el-button size="small" type="primary">选择文件</el-button>
          <div slot="tip" class="el-upload__tip">上传凭证图片，2张以内</div>
        </el-upload>
        <div v-if="carouselStatus" class="rotationList">
          <div v-for="(item,index) in pictures" :key="index" class="imgList">
            <div>
              <img preview="1" :src="item" alt>
            </div>
            <p>大图</p>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="paymentDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="paymentExpress()">确 定</el-button>
    </span>
  </el-dialog>
</template>


<script>
import Vue from 'vue';
import { ajax } from "@/api";
import { getToken } from "@/utils/auth";
import preview from 'vue-photo-preview';
import 'vue-photo-preview/dist/skin.css';
Vue.use(preview)

export default {
  name: "orderTailConfirm",
  data() {
    return {
      uploadAction: process.env.BASE_API + "file.upload",
      paymentDialogVisible:false,
      pictures:[],
      orderTailConfirmParams: {
        //订单尾款确认
        orderId: "",
        name: "",
        pictures: [],
        token: getToken()
      },
      carouselStatus:false
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    openOrderConfirm(item){
        this.paymentDialogVisible = true;
        this.orderTailConfirmParams.orderId = item.orderId;
    },
    //提交确认尾款  -- 订单尾款确认
    paymentExpress() {
      if (this.orderTailConfirmParams.name === "") {
        return this.$message.error("请输入收款人");
      }

      if (this.pictures.length === 0) {
        return this.$message.error("请上传凭证信息");
      }

      this.orderTailConfirmParams.pictures = JSON.stringify(this.pictures);
      ajax("orderTailConfirm", this.orderTailConfirmParams).then(res => {
        if (res.data.status) {
          this.paymentDialogVisible = false;
          this.$message.success("尾款确认成功");
          setTimeout(() => {
            location.reload();
          },100);
        } else {
          this.orderTailConfirmParams.pictures = JSON.stringify(this.pictures);
          this.$message.error(res.data.message);
        }
      });
    },
    //上传凭证
    handleRotationSuccess(res) {
      if (res.status) {
        this.carouselStatus = true;
        if (this.pictures.length < 2) {
          this.pictures.push(res.data);
          this.$previewRefresh()
        } else {
          this.$message.error("最多上传2张");
        }
      }
    }
  }
};
</script>


<style lang="less" scoped>
.rotationList {
  display: flex;
  flex-wrap: wrap;
  width: inherit;
  .imgList {
    margin: 0 .5rem .5rem 0;
    width: 11rem;
    div {
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      text-align: center;
      color: red;
      font-size: 14px;
      cursor: pointer;
      margin: 0;
    }
  }
}

</style>
